<template>
  <div class="html-container">
    <div class="head">
      <div class="app-name">
        新云滕科技有限公司
      </div>
      <div class="main-tab">
        <div :class="['tab-item', mainTab == 0 && 'active']" tabindex="1" @click="mainTabChange(0)">
          <span class="iconfont icon-shouye icon"></span>
        </div>
        <div :class="['tab-item', mainTab == 1 && 'active']" tabindex="1" @click="mainTabChange(1)">运行管理</div>
        <div :class="['tab-item', mainTab == 2 && 'active']" tabindex="1" @click="mainTabChange(2)">负楼层管理</div>
        <div :class="['tab-item', mainTab == 3 && 'active']" tabindex="1" @click="mainTabChange(3)">重点区域</div>
      </div>
      <div class="clock">{{ currentTime }} {{ currentWeekday }}</div>
    </div>
    <div class="main-center">
      <div class="left-container">
        <div class="area-container">
          <div class="main-area-outer">
            <div class="main-area-inner">
              内筒
            </div>
          </div>
        </div>
      </div>
      <div class="right-container">右边</div>
    </div>

    <div class="set-postion" @click="goTagPostion">
      <span class="iconfont icon-position icon"></span>
    </div>
    <div class="footer">
      <div class="device-container">
        <div class="device-name">摄像头01</div>
        <div class="device-name">摄像头01</div>
        <div class="device-name">摄像头01</div>
        <div class="device-name">摄像头01</div>
      </div>
      <div class="class-container">
        <div class="class-name">
          摄像头
        </div>
      </div>
      <div class="system-container">
        <div class="system-name">
          视频监控
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import eventHub from "@/utils/eventHub";
const mainTab = ref(0);
const currentTime = ref('');
const currentWeekday = ref('');
function mainTabChange(type) {
  mainTab.value = type;
  if (type === 0 || type === 1){
    console.log('=====go main ====')
    eventHub.emit("goMain");
  }
}
function cloclTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekday = weekdays[now.getDay()];
  currentWeekday.value = weekday;
}

function goTagPostion(){
  console.log('=====go tagPostion ====')
    eventHub.emit("tagPostion");
}
onMounted(() => {
  cloclTime();
  setInterval(cloclTime, 1000);
})
</script>

<style scoped>
.html-container {
  -webkit-user-select: none;
  user-select: none;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

.head {
  width: 100vw;
  height: 94px;
  display: flex;
  flex-direction: row;
  border-image: url('@/assets/images/head-bg.png') 40 20 52 1135 fill / 40px 20px 54px 1135px stretch;
  color: rgb(226, 226, 255);
  font-size: 0.4rem;
  pointer-events: all;
}

.head .app-name {
  font-size: 28px;
  font-weight: bold;
  margin-top: 20px;
  margin-left: 140px;
  color: #E2C387;
}

.head .clock {
  margin-left: auto;
  margin-right: 20px;
  margin-top: 12px;
  font-size: 14px;
  height: 25px;
  pointer-events: none;
}

.main-tab {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  margin-left: 120px;
  color: #B69356;
}

.main-tab .tab-item {
  font-size: 18px;
  padding: 0px 15px;
  cursor: pointer;
  height: 30px;
}

.main-tab .tab-item .icon {
  font-size: 24px;
}

.main-tab .active {
  color: #E2C387;
}

/* .main-tab .tab-item:active {
  color: #E2C387;
} */

.main-tab .tab-item:focus {
  color: #E2C387;
}

.main-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 80px;
}

.main-center .left-container {
  margin-left: 20px;
}

.main-center .left-container .main-area-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 45px;
  background: linear-gradient(-135deg, transparent 4px, #EFC18B 0) top right,
    linear-gradient(-45deg, transparent 4px, #EFC18B 0) bottom right,
    linear-gradient(45deg, transparent 4px, #EFC18B 0) bottom left,
    linear-gradient(135deg, transparent 4px, #EFC18B 0) top left;
    background-size: 50% 50%;
  background-repeat: no-repeat;
}

.main-center .left-container .main-area-inner {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background:
    linear-gradient(-135deg, transparent 4px, #323234 0) top right,
    linear-gradient(-45deg, transparent 4px, #323234 0) bottom right,
    linear-gradient(45deg, transparent 4px, #323234 0) bottom left,
    linear-gradient(135deg, transparent 4px, #323234 0) top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.main-center .right-container {
  margin-right: 20px;
}

.set-postion {
  position: absolute;
  bottom: 40px;
  right: 20px;
  cursor: pointer;
  pointer-events: all;
  z-index: 100;
}

.set-postion .icon {
  font-size: 26px;
  color: #E2C387;

}

.footer {
  position: absolute;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  color: white;

}

.footer .system-container {
  width: 100vw;
  height: 60px;
  border-image: url('@/assets/images/system-bg-01.png') 40 440 20 440 fill / 40px 440px 20px 440px stretch;
  z-index: 14;
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  justify-content: center;
}

.footer .system-container .system-name {
  padding-top: 15px;
}

.footer .class-container {
  width: 100vw;
  height: 100px;
  background-color: #0D161C;
  position: absolute;
  bottom: 0px;
  z-index: 12;
  border-top: 1px solid #987F62;
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  justify-content: center;
}

.footer .class-container .class-name {
  padding-top: 10px;
}

.footer .device-container {
  padding: 5px 15px;
  position: absolute;
  bottom: 104px;
  max-width: 60vw;
  max-height: 100px;
  border-image: url('@/assets/images/class-type-bg.png') 45 75 45 75 fill / 45px 75px 45px 75px stretch;
  z-index: 14;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-items: center;
}

.footer .device-container .device-name {
  padding: 0px 10px;
}</style>